<template>
  <div class="footer_guide">
    <span class="guide_item" :class="{on: '/index'===$route.path}" @click="goTo('/index')">
      <span class="item_icon">
		  <!-- <img src="" class="index_img" alt=""> -->
        <i class="iconfont icon-zhuye" style="font-size:20px"></i>
      </span>
      <span>首页</span>
    </span>
    <a href="javascript:;" class="guide_item" :class="{on: '/kefu'===$route.path}" @click="goTo('/kefu')">
      <span class="item_icon">
        <i class="iconfont icon-zaixiankefucustomerservice" style="font-size:28px;position:relative;top:-5px;"></i>
      </span>
      <span>客服</span>
    </a>
    <a href="javascript:;" class="guide_item" :class="{on: '/fwz'===$route.path}" @click="goTo('/fwz')">
      <span class="item_icon">
        <i class="iconfont icon-zuanshi" style="font-size:22px"></i>
      </span>
      <span>服务站</span>
    </a>
    <a href="javascript:;" class="guide_item" :class="{on: '/my'===$route.path}" @click="goTo('/my')">
      <span class="item_icon">
        <i class="iconfont icon-wo" style="font-size:24px"></i>
      </span>
      <span>我的</span>
    </a>
  </div>
</template>

<script>
  export default {
    methods: {
      goTo (path) {
        this.$router.replace(path)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .footer_guide  //footer
    top-border-1px(#e4e4e4)
    position fixed
    z-index 100
    left 0
    right 0
    bottom 0
    background-color #fff
    width 100%
    height 50px
    display flex
    .guide_item
      display flex
      flex 1
      text-align center
      flex-direction column
      align-items center
      margin 5px
      color #999999
      font-size 13px
      &.on
        color rgb(249, 158, 43)
		
		i
			width 24px
			height 24px
			display block
			background-size 100%	
		&.on>span
			
			.index_img
				bg-image2('../../pages/index/images/编组')
			.img-search
				bg-image2('../../pages/index/images/sy_xiaoxi_icon')
			.img-dingdan
				bg-image2('../../pages/index/images/sy_fuwuzhan_icon')
			.img-geren
				bg-image2('../../pages/index/images/sy_wode_icon(1)')
		span
	    	font-size 12px
	    	margin-top 2px
	    	margin-bottom 2px
		
	    	.index_img
	    		bg-image2('../../pages/index/images/编组(1)')
	    	.img-search
	    		bg-image2('../../pages/index/images/sy_kf_hui')
	    	.img-dingdan
	    		bg-image2('../../pages/index/images/sy_fuwuzhan_icon(1)')
			.img-geren
				bg-image2('../../pages/index/images/sy_wode_icon')
				
		
		  
</style>